<template>
  <div class="todoItem">
          <li class="list-group-item">
              <label for="">
                  <input type="checkbox" :checked="todo.done" @click="handlecheck(todo.id)">
                  <!-- <input type="checkbox" v-model="todo.done"/> 也可以实现即绑定又取反，但违反规则 props的数据不允许改-->
                  <span>{{todo.title}}</span>
              </label>
              <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
          </li>
  </div>
</template>

<script>
    export default {
        name:'MyItem',
        //声明接受todo对象
        props:['todo','checkTodo','deleteTodo'],
        methods:{
            //勾选取消勾选
            handlecheck(id){
                //通知App组件把对应的todo对象的done值取反
                console.log(id);
                this.checkTodo(id)
            },
            //删除
            handleDelete(id){
                if (confirm('确认是否要删除？')) {
                    //通知App删除对应的对象
                    console.log(id);
                    this.deleteTodo(id)
                } 
                
            }
        }
    }
</script>

<style scoped>
li{
    height: 50px;
}

li:hover{
    background-color: rgb(223, 223, 204);
}
li:hover button{
    display: block;
    
}
button{
    float: right;
    display: none;
}
</style>